<!DOCTYPE html>
<html lang="en">

<head>
    <#include "/lx/admin/components/meta.html" />
    <title>活动详情 ${metaTitleSuffix!}</title>
    <#include "/lx/admin/components/stylesheets.html" />
</head>

<body>
    <div id="app">
        <el-container>
            <#assign menuIndex="2-1" />
            <#include "/lx/admin/components/menu.html" />
            <el-container>
                <#include "/lx/admin/components/header.html" />
                <el-main>
                    <template>
                        <el-form ref="form" :model="info" label-width="100px">
                            <el-form-item label="姓名">
                                <el-input v-model="info.name" placeholder="请输入姓名"></el-input>
                            </el-form-item>
                            <el-form-item label="姓（拼音）">
                                <el-input v-model="info.lastName" placeholder="请输入姓（拼音）"></el-input>
                            </el-form-item>
                            <el-form-item label="名（拼音）">
                                <el-input v-model="info.firstName" placeholder="请输入名（拼音）"></el-input>
                            </el-form-item>
                            <el-form-item label="英文名">
                                <el-input v-model="info.englishName" placeholder="请输入英文名"></el-input>
                            </el-form-item>
                            <el-form-item label="性别">
                                <el-radio-group v-model="info.sex">
                                    <el-radio :label="0">男</el-radio>
                                    <el-radio :label="1">女</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="擅长国家">
                                <!-- <el-input v-model="info.country" placeholder="请输入擅长国家"></el-input> -->
                                <el-checkbox-group v-model="checkedCountry">
                                    <el-checkbox :label="item" v-for="(item, index) in countryArray"></el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                            <el-form-item label="账号">
                                <el-input v-model="info.account" placeholder="请输入账号"></el-input>
                            </el-form-item>
                            <el-form-item label="密码">
                                <el-input v-model="info.password" placeholder="请输入密码"></el-input>
                            </el-form-item>
                            <el-form-item label="邮箱">
                                <el-input v-model="info.email" placeholder="请输入邮箱"></el-input>
                            </el-form-item>
                            <el-form-item label="工作名片">
                                <!-- <el-upload class="image-uploader" action="/lx/admin/api/uploadImage" :show-file-list="false" :on-remove="removeImg" :on-success='successImg' :on-error="errorImg" :on-progress="onProgress" name="file">
                                    <img v-if="cardUrl" :src="cardUrl" class="image">
                                    <i v-else class="el-icon-plus image-uploader-icon"></i>
                                </el-upload> -->
                                <el-upload class="image-uploader" :http-request='uploadQnFile' :show-file-list="false" :on-remove="removeImg" :on-success='successImg' :on-error="errorImg" :on-progress="onProgress" name="file">
                                    <img v-if="cardUrl" :src="cardUrl" class="image">
                                    <i v-else class="el-icon-plus image-uploader-icon"></i>
                                </el-upload>
                                <div class="image-uploader-zoomin" @click="previewImg(cardUrl)" v-if="cardUrl">
                                    <i class="el-icon-zoom-in"></i>
                                </div>
                            </el-form-item>
                            <el-form-item label="注册时间">
                                <el-input v-model="info.addTime" readonly></el-input>
                            </el-form-item>
                            <el-form-item label="已获得的证书">
                                <el-table :data="info.certs" style="width: 100%">
                                    <el-table-column prop="title" label="证书">
                                    </el-table-column>
                                    <el-table-column prop="passTime" label="获得时间">
                                    </el-table-column>
                                </el-table>
                            </el-form-item>
                            <el-form-item label="审核">
                                <el-select v-model="info.status" placeholder="请选择审核状态">
                                    <el-option label="未注册" :value="0"></el-option>
                                    <el-option label="待审核" :value="1"></el-option>
                                    <el-option label="已审核" :value="2"></el-option>
                                    <el-option label="不通过" :value="3"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="不通过原因" v-if="info.status == 3">
                                <el-input v-model="info.content" type="textarea" :autosize="{ minRows: 4 }" placeholder="请输入不通过原因"></el-input>
                            </el-form-item>
                            <!-- <el-form-item label="时间">
                                <el-date-picker v-model="datetimeRange" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" unlink-panels="true" :default-value="new Date">
                                </el-date-picker>
                            </el-form-item> -->
                            <!-- <el-form-item label="活动内容">
                                <el-input v-model="info.content" type="textarea" :autosize="{ minRows: 4 }" placeholder="请输入内容"></el-input>
                            </el-form-item> -->
                            <!-- <el-form-item label="学校">
                                <el-select v-model="info.schoolId" placeholder="请选择学校">
                                    <el-option v-for="(item, index) in schools" :label="item.name" :value="item.id"></el-option>
                                </el-select>
                            </el-form-item> -->
                            <el-form-item>
                                <el-button type="primary" @click="submit">提交</el-button>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-main>
            </el-container>
        </el-container>
        <#include "/lx/admin/components/footer.html" />
    </div>
    <#include "/lx/admin/components/scripts.html" />
    <#include "/lx/admin/components/qiniu.html" />
    <script type="text/javascript">
    var vue = new Vue({
        el: '#app',
        data() {
            return {
                info: {},
                schools: [],
                datetimeRange: '',
                cardUrl: '',
                countryArray: ["港澳台", "英国", "澳大利亚", "美国", "加拿大", "爱尔兰", "新西兰", "其他"],
                checkedCountry: []
            }
        },
        watch: {

        },
        mounted: function() {
            this.info = ${info!'{}'}
            if (this.info.card) {
                this.cardUrl = this.info.card;
            }
            if (this.info.country) {
                this.checkedCountry = this.info.country.split("、");
            }
        },
        methods: {
            submit() {
                var self = this;
                // if (!self.info.name) {
                //     msg("请输入姓名");
                //     return;
                // }
                // if (!self.info.lastName) {
                //     msg("请输入姓（拼音）");
                //     return;
                // }
                // if (!self.info.firstName) {
                //     msg("请输入名（拼音）");
                //     return;
                // }
                // if (!self.info.englishName) {
                //     msg("请输入英文名");
                //     return;
                // }
                // if (!self.checkedCountry || self.checkedCountry.length == 0) {
                //     msg("请输入擅长国家");
                //     return;
                // }
                // if (!self.info.account) {
                //     msg("请输入账号");
                //     return;
                // }
                // if (!self.info.password) {
                //     msg("请输入密码");
                //     return;
                // }
                // if (!this.cardUrl) {
                //     msg("请上传工作名片");
                //     return;
                // }
                if (self.info.status == 3 && !self.info.content) {
                    msg("请输入不通过原因");
                    return;
                }

                var url = "/lx/admin/user/submit"
                var param = {
                    id: self.info.id,
                    name: self.info.name,
                    lastName: self.info.lastName,
                    firstName: self.info.firstName,
                    englishName: self.info.englishName,
                    sex: self.info.sex,
                    // country: self.info.country,
                    country: self.checkedCountry.join("、"),
                    account: self.info.account,
                    password: self.info.password,
                    email: self.info.email,
                    card: self.cardUrl,
                    status: self.info.status,
                    content: self.info.status == 3 ? self.info.content : ''
                };
                var success = () => {
                    if ('${referer!}' != '') {
                        window.location.href = '${referer!}';
                    } else {
                        window.location.href = "/lx/admin/user/list";
                    }
                }
                var fail = () => {
                    msg(response.data.msg);
                }
                var complete = () => {}
                axiosRequestPro(url, param, success, fail, complete);
            },
            removeImg(file, fileList) {
                this.cardUrl = "";
            },
            successImg(response, file, fileList) {
                // endLoading();
                // this.cardUrl = response.info.url;
                this.cardUrl = response.data.url;
            },
            errorImg(err, file, fileList) {
                // endLoading();
                msg('上传图片失败')
            },
            onProgress() {
                // loading();
            },
            previewImg(url) {
                var layerOption = {
                    "title": "工作名片", //相册标题
                    "id": 0, //相册id
                    "start": 0, //初始显示的图片序号，默认0
                    "data": [ //相册包含的图片，数组格式
                        {
                            "alt": "工作名片",
                            "pid": 0, //图片id
                            "src": url, //原图地址
                            "thumb": "" //缩略图地址
                        }
                    ]
                }
                layer.photos({
                    photos: layerOption,
                    anim: 6
                })
            }
        }
    })
    </script>
    <style type="text/css">
    .title {
        font-size: 18px;
        font-weight: bold;
    }

    input[type="file"] {
        display: none !important;
    }

    .image-uploader {
        position: relative;
    }

    .image-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .image-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .image-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .image-uploader-zoomin {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 32px;
        height: 32px;
        font-size: 16px;
        cursor: pointer;
        opacity: 0.4;
    }

    .image-uploader-zoomin:hover {
        opacity: 1;
    }

    .image {
        width: 178px;
        height: 178px;
        display: block;
    }
    </style>
    <#include "/lx/admin/components/msg.html" />
</body>

</html>